<template>
    <div class="w-full h-full -100 dark:-900 p-3">
        <div class="w-full h-full flex flex-col p-4 bg-white dark:bg-gery-900 text-gery-700 dark:text-gery-300">
            <a-tabs v-model:activeKey="state.activeKey">
                <a-tab-pane key="1" tab="tailwindcss类名"></a-tab-pane>
                <a-tab-pane key="2" tab="web安全色（216版）"></a-tab-pane>
                <a-tab-pane key="3" tab="识色器"></a-tab-pane>
            </a-tabs>
            <div class="w-full h-full p-4 overflow-y-auto" v-show="state.activeKey === '1'">
                <div class="grid grid-cols-1 gap-8">
                    <div>
                        <div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4">
                            <div class="w-32 flex-shrink-0">
                                <div class="h-10 flex flex-col justify-center">
                                    <div class="text-sm font-semibold text-gray-600">Gery</div>
                                    <div><code class="text-xs text-gray-500">colors.<!-- -->gery</code></div>
                                </div>
                            </div>
                            <div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2">
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0 bg-gery-50"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">50</div>
                                        <div>#F8FAFC</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0  bg-gery-100"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">100</div>
                                        <div>#F1F5F9</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0  bg-gery-200"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">200</div>
                                        <div>#E2E8F0</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0  bg-gery-300"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">300</div>
                                        <div>#CBD5E1</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0  bg-gery-400"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">400</div>
                                        <div>#94A3B8</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0  bg-gery-500"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">500</div>
                                        <div>#64748B</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0  bg-gery-600"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">600</div>
                                        <div>#475569</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0  bg-gery-700"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">700</div>
                                        <div>#334155</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0  bg-gery-800"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">800</div>
                                        <div>#1E293B</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0  bg-gery-900"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">900</div>
                                        <div>#0F172A</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4">
                            <div class="w-32 flex-shrink-0">
                                <div class="h-10 flex flex-col justify-center">
                                    <div class="text-sm font-semibold text-gray-600">Gray</div>
                                    <div><code class="text-xs text-gray-500">colors.<!-- -->gray</code></div>
                                </div>
                            </div>
                            <div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2">
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fafafa"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">50</div>
                                        <div>#FAFAFA</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f4f4f5"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">100</div>
                                        <div>#F4F4F5</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e4e4e7"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">200</div>
                                        <div>#E4E4E7</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d4d4d8"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">300</div>
                                        <div>#D4D4D8</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a1a1aa"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">400</div>
                                        <div>#A1A1AA</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#71717a"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">500</div>
                                        <div>#71717A</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#52525b"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">600</div>
                                        <div>#52525B</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#3f3f46"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">700</div>
                                        <div>#3F3F46</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#27272a"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">800</div>
                                        <div>#27272A</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#18181b"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">900</div>
                                        <div>#18181B</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4">
                            <div class="w-32 flex-shrink-0">
                                <div class="h-10 flex flex-col justify-center">
                                    <div class="text-sm font-semibold text-gray-600">Red</div>
                                    <div><code class="text-xs text-gray-500">colors.<!-- -->red</code></div>
                                </div>
                            </div>
                            <div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2">
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fef2f2"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">50</div>
                                        <div>#FEF2F2</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fee2e2"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">100</div>
                                        <div>#FEE2E2</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fecaca"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">200</div>
                                        <div>#FECACA</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fca5a5"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">300</div>
                                        <div>#FCA5A5</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f87171"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">400</div>
                                        <div>#F87171</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ef4444"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">500</div>
                                        <div>#EF4444</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#dc2626"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">600</div>
                                        <div>#DC2626</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#b91c1c"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">700</div>
                                        <div>#B91C1C</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#991b1b"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">800</div>
                                        <div>#991B1B</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#7f1d1d"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">900</div>
                                        <div>#7F1D1D</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4">
                            <div class="w-32 flex-shrink-0">
                                <div class="h-10 flex flex-col justify-center">
                                    <div class="text-sm font-semibold text-gray-600">Orange</div>
                                    <div><code class="text-xs text-gray-500">colors.<!-- -->orange</code></div>
                                </div>
                            </div>
                            <div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2">
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fff7ed"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">50</div>
                                        <div>#FFF7ED</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ffedd5"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">100</div>
                                        <div>#FFEDD5</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fed7aa"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">200</div>
                                        <div>#FED7AA</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fdba74"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">300</div>
                                        <div>#FDBA74</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fb923c"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">400</div>
                                        <div>#FB923C</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f97316"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">500</div>
                                        <div>#F97316</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ea580c"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">600</div>
                                        <div>#EA580C</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#c2410c"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">700</div>
                                        <div>#C2410C</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#9a3412"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">800</div>
                                        <div>#9A3412</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#7c2d12"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">900</div>
                                        <div>#7C2D12</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4">
                            <div class="w-32 flex-shrink-0">
                                <div class="h-10 flex flex-col justify-center">
                                    <div class="text-sm font-semibold text-gray-600">Amber</div>
                                    <div><code class="text-xs text-gray-500">colors.<!-- -->amber</code></div>
                                </div>
                            </div>
                            <div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2">
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fffbeb"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">50</div>
                                        <div>#FFFBEB</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fef3c7"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">100</div>
                                        <div>#FEF3C7</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fde68a"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">200</div>
                                        <div>#FDE68A</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fcd34d"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">300</div>
                                        <div>#FCD34D</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fbbf24"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">400</div>
                                        <div>#FBBF24</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f59e0b"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">500</div>
                                        <div>#F59E0B</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d97706"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">600</div>
                                        <div>#D97706</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#b45309"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">700</div>
                                        <div>#B45309</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#92400e"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">800</div>
                                        <div>#92400E</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#78350f"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">900</div>
                                        <div>#78350F</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4">
                            <div class="w-32 flex-shrink-0">
                                <div class="h-10 flex flex-col justify-center">
                                    <div class="text-sm font-semibold text-gray-600">Yellow</div>
                                    <div><code class="text-xs text-gray-500">colors.<!-- -->yellow</code></div>
                                </div>
                            </div>
                            <div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2">
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fefce8"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">50</div>
                                        <div>#FEFCE8</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fef9c3"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">100</div>
                                        <div>#FEF9C3</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fef08a"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">200</div>
                                        <div>#FEF08A</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fde047"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">300</div>
                                        <div>#FDE047</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#facc15"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">400</div>
                                        <div>#FACC15</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#eab308"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">500</div>
                                        <div>#EAB308</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ca8a04"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">600</div>
                                        <div>#CA8A04</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a16207"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">700</div>
                                        <div>#A16207</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#854d0e"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">800</div>
                                        <div>#854D0E</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#713f12"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">900</div>
                                        <div>#713F12</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4">
                            <div class="w-32 flex-shrink-0">
                                <div class="h-10 flex flex-col justify-center">
                                    <div class="text-sm font-semibold text-gray-600">Lime</div>
                                    <div><code class="text-xs text-gray-500">colors.<!-- -->lime</code></div>
                                </div>
                            </div>
                            <div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2">
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f7fee7"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">50</div>
                                        <div>#F7FEE7</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ecfccb"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">100</div>
                                        <div>#ECFCCB</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d9f99d"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">200</div>
                                        <div>#D9F99D</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#bef264"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">300</div>
                                        <div>#BEF264</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a3e635"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">400</div>
                                        <div>#A3E635</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#84cc16"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">500</div>
                                        <div>#84CC16</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#65a30d"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">600</div>
                                        <div>#65A30D</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#4d7c0f"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">700</div>
                                        <div>#4D7C0F</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#3f6212"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">800</div>
                                        <div>#3F6212</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#365314"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">900</div>
                                        <div>#365314</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4">
                            <div class="w-32 flex-shrink-0">
                                <div class="h-10 flex flex-col justify-center">
                                    <div class="text-sm font-semibold text-gray-600">Green</div>
                                    <div><code class="text-xs text-gray-500">colors.<!-- -->green</code></div>
                                </div>
                            </div>
                            <div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2">
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f0fdf4"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">50</div>
                                        <div>#F0FDF4</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#dcfce7"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">100</div>
                                        <div>#DCFCE7</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#bbf7d0"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">200</div>
                                        <div>#BBF7D0</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#86efac"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">300</div>
                                        <div>#86EFAC</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#4ade80"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">400</div>
                                        <div>#4ADE80</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#22c55e"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">500</div>
                                        <div>#22C55E</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#16a34a"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">600</div>
                                        <div>#16A34A</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#15803d"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">700</div>
                                        <div>#15803D</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#166534"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">800</div>
                                        <div>#166534</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#14532d"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">900</div>
                                        <div>#14532D</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4">
                            <div class="w-32 flex-shrink-0">
                                <div class="h-10 flex flex-col justify-center">
                                    <div class="text-sm font-semibold text-gray-600">Emerald</div>
                                    <div><code class="text-xs text-gray-500">colors.<!-- -->emerald</code></div>
                                </div>
                            </div>
                            <div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2">
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ecfdf5"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">50</div>
                                        <div>#ECFDF5</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d1fae5"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">100</div>
                                        <div>#D1FAE5</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a7f3d0"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">200</div>
                                        <div>#A7F3D0</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#6ee7b7"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">300</div>
                                        <div>#6EE7B7</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#34d399"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">400</div>
                                        <div>#34D399</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#10b981"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">500</div>
                                        <div>#10B981</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#059669"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">600</div>
                                        <div>#059669</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#047857"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">700</div>
                                        <div>#047857</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#065f46"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">800</div>
                                        <div>#065F46</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#064e3b"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">900</div>
                                        <div>#064E3B</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4">
                            <div class="w-32 flex-shrink-0">
                                <div class="h-10 flex flex-col justify-center">
                                    <div class="text-sm font-semibold text-gray-600">Teal</div>
                                    <div><code class="text-xs text-gray-500">colors.<!-- -->teal</code></div>
                                </div>
                            </div>
                            <div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2">
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f0fdfa"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">50</div>
                                        <div>#F0FDFA</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ccfbf1"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">100</div>
                                        <div>#CCFBF1</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#99f6e4"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">200</div>
                                        <div>#99F6E4</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#5eead4"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">300</div>
                                        <div>#5EEAD4</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#2dd4bf"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">400</div>
                                        <div>#2DD4BF</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#14b8a6"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">500</div>
                                        <div>#14B8A6</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0d9488"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">600</div>
                                        <div>#0D9488</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0f766e"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">700</div>
                                        <div>#0F766E</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#115e59"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">800</div>
                                        <div>#115E59</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#134e4a"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">900</div>
                                        <div>#134E4A</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4">
                            <div class="w-32 flex-shrink-0">
                                <div class="h-10 flex flex-col justify-center">
                                    <div class="text-sm font-semibold text-gray-600">Cyan</div>
                                    <div><code class="text-xs text-gray-500">colors.<!-- -->cyan</code></div>
                                </div>
                            </div>
                            <div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2">
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ecfeff"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">50</div>
                                        <div>#ECFEFF</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#cffafe"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">100</div>
                                        <div>#CFFAFE</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a5f3fc"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">200</div>
                                        <div>#A5F3FC</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#67e8f9"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">300</div>
                                        <div>#67E8F9</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#22d3ee"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">400</div>
                                        <div>#22D3EE</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#06b6d4"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">500</div>
                                        <div>#06B6D4</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0891b2"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">600</div>
                                        <div>#0891B2</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0e7490"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">700</div>
                                        <div>#0E7490</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#155e75"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">800</div>
                                        <div>#155E75</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#164e63"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">900</div>
                                        <div>#164E63</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4">
                            <div class="w-32 flex-shrink-0">
                                <div class="h-10 flex flex-col justify-center">
                                    <div class="text-sm font-semibold text-gray-600">Sky</div>
                                    <div><code class="text-xs text-gray-500">colors.<!-- -->sky</code></div>
                                </div>
                            </div>
                            <div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2">
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f0f9ff"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">50</div>
                                        <div>#F0F9FF</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e0f2fe"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">100</div>
                                        <div>#E0F2FE</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#bae6fd"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">200</div>
                                        <div>#BAE6FD</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#7dd3fc"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">300</div>
                                        <div>#7DD3FC</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#38bdf8"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">400</div>
                                        <div>#38BDF8</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0ea5e9"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">500</div>
                                        <div>#0EA5E9</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0284c7"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">600</div>
                                        <div>#0284C7</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0369a1"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">700</div>
                                        <div>#0369A1</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#075985"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">800</div>
                                        <div>#075985</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#0c4a6e"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">900</div>
                                        <div>#0C4A6E</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4">
                            <div class="w-32 flex-shrink-0">
                                <div class="h-10 flex flex-col justify-center">
                                    <div class="text-sm font-semibold text-gray-600">Blue</div>
                                    <div><code class="text-xs text-gray-500">colors.<!-- -->blue</code></div>
                                </div>
                            </div>
                            <div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2">
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#eff6ff"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">50</div>
                                        <div>#EFF6FF</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#dbeafe"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">100</div>
                                        <div>#DBEAFE</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#bfdbfe"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">200</div>
                                        <div>#BFDBFE</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#93c5fd"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">300</div>
                                        <div>#93C5FD</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#60a5fa"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">400</div>
                                        <div>#60A5FA</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#3b82f6"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">500</div>
                                        <div>#3B82F6</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#2563eb"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">600</div>
                                        <div>#2563EB</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#1d4ed8"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">700</div>
                                        <div>#1D4ED8</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#1e40af"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">800</div>
                                        <div>#1E40AF</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#1e3a8a"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">900</div>
                                        <div>#1E3A8A</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4">
                            <div class="w-32 flex-shrink-0">
                                <div class="h-10 flex flex-col justify-center">
                                    <div class="text-sm font-semibold text-gray-600">Indigo</div>
                                    <div><code class="text-xs text-gray-500">colors.<!-- -->indigo</code></div>
                                </div>
                            </div>
                            <div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2">
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#eef2ff"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">50</div>
                                        <div>#EEF2FF</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e0e7ff"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">100</div>
                                        <div>#E0E7FF</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#c7d2fe"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">200</div>
                                        <div>#C7D2FE</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a5b4fc"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">300</div>
                                        <div>#A5B4FC</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#818cf8"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">400</div>
                                        <div>#818CF8</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#6366f1"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">500</div>
                                        <div>#6366F1</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#4f46e5"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">600</div>
                                        <div>#4F46E5</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#4338ca"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">700</div>
                                        <div>#4338CA</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#3730a3"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">800</div>
                                        <div>#3730A3</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#312e81"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">900</div>
                                        <div>#312E81</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4">
                            <div class="w-32 flex-shrink-0">
                                <div class="h-10 flex flex-col justify-center">
                                    <div class="text-sm font-semibold text-gray-600">Violet</div>
                                    <div><code class="text-xs text-gray-500">colors.<!-- -->violet</code></div>
                                </div>
                            </div>
                            <div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2">
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f5f3ff"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">50</div>
                                        <div>#F5F3FF</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ede9fe"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">100</div>
                                        <div>#EDE9FE</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ddd6fe"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">200</div>
                                        <div>#DDD6FE</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#c4b5fd"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">300</div>
                                        <div>#C4B5FD</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a78bfa"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">400</div>
                                        <div>#A78BFA</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#8b5cf6"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">500</div>
                                        <div>#8B5CF6</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#7c3aed"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">600</div>
                                        <div>#7C3AED</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#6d28d9"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">700</div>
                                        <div>#6D28D9</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#5b21b6"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">800</div>
                                        <div>#5B21B6</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#4c1d95"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">900</div>
                                        <div>#4C1D95</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4">
                            <div class="w-32 flex-shrink-0">
                                <div class="h-10 flex flex-col justify-center">
                                    <div class="text-sm font-semibold text-gray-600">Purple</div>
                                    <div><code class="text-xs text-gray-500">colors.<!-- -->purple</code></div>
                                </div>
                            </div>
                            <div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2">
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#faf5ff"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">50</div>
                                        <div>#FAF5FF</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f3e8ff"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">100</div>
                                        <div>#F3E8FF</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e9d5ff"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">200</div>
                                        <div>#E9D5FF</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d8b4fe"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">300</div>
                                        <div>#D8B4FE</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#c084fc"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">400</div>
                                        <div>#C084FC</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a855f7"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">500</div>
                                        <div>#A855F7</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#9333ea"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">600</div>
                                        <div>#9333EA</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#7e22ce"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">700</div>
                                        <div>#7E22CE</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#6b21a8"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">800</div>
                                        <div>#6B21A8</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#581c87"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">900</div>
                                        <div>#581C87</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4">
                            <div class="w-32 flex-shrink-0">
                                <div class="h-10 flex flex-col justify-center">
                                    <div class="text-sm font-semibold text-gray-600">Fuchsia</div>
                                    <div><code class="text-xs text-gray-500">colors.<!-- -->fuchsia</code></div>
                                </div>
                            </div>
                            <div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2">
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fdf4ff"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">50</div>
                                        <div>#FDF4FF</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fae8ff"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">100</div>
                                        <div>#FAE8FF</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f5d0fe"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">200</div>
                                        <div>#F5D0FE</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f0abfc"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">300</div>
                                        <div>#F0ABFC</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e879f9"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">400</div>
                                        <div>#E879F9</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#d946ef"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">500</div>
                                        <div>#D946EF</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#c026d3"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">600</div>
                                        <div>#C026D3</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#a21caf"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">700</div>
                                        <div>#A21CAF</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#86198f"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">800</div>
                                        <div>#86198F</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#701a75"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">900</div>
                                        <div>#701A75</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4">
                            <div class="w-32 flex-shrink-0">
                                <div class="h-10 flex flex-col justify-center">
                                    <div class="text-sm font-semibold text-gray-600">Pink</div>
                                    <div><code class="text-xs text-gray-500">colors.<!-- -->pink</code></div>
                                </div>
                            </div>
                            <div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2">
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fdf2f8"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">50</div>
                                        <div>#FDF2F8</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fce7f3"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">100</div>
                                        <div>#FCE7F3</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fbcfe8"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">200</div>
                                        <div>#FBCFE8</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f9a8d4"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">300</div>
                                        <div>#F9A8D4</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f472b6"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">400</div>
                                        <div>#F472B6</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ec4899"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">500</div>
                                        <div>#EC4899</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#db2777"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">600</div>
                                        <div>#DB2777</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#be185d"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">700</div>
                                        <div>#BE185D</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#9d174d"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">800</div>
                                        <div>#9D174D</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#831843"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">900</div>
                                        <div>#831843</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="flex flex-col space-y-3 sm:flex-row text-xs sm:space-y-0 sm:space-x-4">
                            <div class="w-32 flex-shrink-0">
                                <div class="h-10 flex flex-col justify-center">
                                    <div class="text-sm font-semibold text-gray-600">Rose</div>
                                    <div><code class="text-xs text-gray-500">colors.<!-- -->rose</code></div>
                                </div>
                            </div>
                            <div class="min-w-0 flex-1 grid grid-cols-5 2xl:grid-cols-10 gap-x-4 gap-y-3 2xl:gap-x-2">
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fff1f2"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">50</div>
                                        <div>#FFF1F2</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#ffe4e6"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">100</div>
                                        <div>#FFE4E6</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fecdd3"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">200</div>
                                        <div>#FECDD3</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fda4af"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">300</div>
                                        <div>#FDA4AF</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#fb7185"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">400</div>
                                        <div>#FB7185</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#f43f5e"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">500</div>
                                        <div>#F43F5E</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#e11d48"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">600</div>
                                        <div>#E11D48</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#be123c"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">700</div>
                                        <div>#BE123C</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#9f1239"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">800</div>
                                        <div>#9F1239</div>
                                    </div>
                                </div>
                                <div class="space-y-1.5">
                                    <div class="h-10 w-full rounded ring-1 ring-inset ring-black ring-opacity-0" style="background-color:#881337"></div>
                                    <div class="px-0.5 md:flex md:justify-between md:space-x-2 2xl:space-x-0 2xl:block">
                                        <div class="w-6 font-medium text-gray-600">900</div>
                                        <div>#881337</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="w-full h-full p-4 overflow-y-auto" v-show="state.activeKey === '2'">
                <!-- <a-alert message="什么是Web安全色?" description="不同的平台（Mac、PC等）有不同的调色板，不同的浏览器也有自己的调色板。这就意味着对于一幅图，显示在Mac上的Web浏览器中的图像，与它在PC上相同浏览器中显示的效果可能差别很大。为了解决Web调色板的问题，各平台、浏览器统一使用一种颜色模型，在此模型下，用户可以看到色彩相同的网页。此模型使用相应的16制进制值00、33、66、99、CC和FF来表达三原色（RGB）中的每一种，总共包括6种红色调、6种绿色调、6种蓝色调，6*6*6的结果就给出了216种特定的颜色。" type="info" /> -->
                <div class="w-full h-full">
                    <a-divider>绿蓝</a-divider>
                    <div data-v-2e45d0a3="" role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">
                        <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
                        <div data-v-2e45d0a3="" class="safety-color__list">
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#000000" class="safety-color__list-item-preview" style="background-color: rgb(0, 0, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#000000</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#000033" class="safety-color__list-item-preview" style="background-color: rgb(0, 0, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#000033</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#000066" class="safety-color__list-item-preview" style="background-color: rgb(0, 0, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#000066</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#000099" class="safety-color__list-item-preview" style="background-color: rgb(0, 0, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#000099</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#0000CC" class="safety-color__list-item-preview" style="background-color: rgb(0, 0, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#0000CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#0000FF" class="safety-color__list-item-preview" style="background-color: rgb(0, 0, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#0000FF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#003300" class="safety-color__list-item-preview" style="background-color: rgb(0, 51, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#003300</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#003333" class="safety-color__list-item-preview" style="background-color: rgb(0, 51, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#003333</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#003366" class="safety-color__list-item-preview" style="background-color: rgb(0, 51, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#003366</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#003399" class="safety-color__list-item-preview" style="background-color: rgb(0, 51, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#003399</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#0033CC" class="safety-color__list-item-preview" style="background-color: rgb(0, 51, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#0033CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#0033FF" class="safety-color__list-item-preview" style="background-color: rgb(0, 51, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#0033FF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#006600" class="safety-color__list-item-preview" style="background-color: rgb(0, 102, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#006600</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#006633" class="safety-color__list-item-preview" style="background-color: rgb(0, 102, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#006633</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#006666" class="safety-color__list-item-preview" style="background-color: rgb(0, 102, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#006666</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#006699" class="safety-color__list-item-preview" style="background-color: rgb(0, 102, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#006699</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#0066CC" class="safety-color__list-item-preview" style="background-color: rgb(0, 102, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#0066CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#0066FF" class="safety-color__list-item-preview" style="background-color: rgb(0, 102, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#0066FF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#009900" class="safety-color__list-item-preview" style="background-color: rgb(0, 153, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#009900</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#009933" class="safety-color__list-item-preview" style="background-color: rgb(0, 153, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#009933</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#009966" class="safety-color__list-item-preview" style="background-color: rgb(0, 153, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#009966</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#009999" class="safety-color__list-item-preview" style="background-color: rgb(0, 153, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#009999</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#0099CC" class="safety-color__list-item-preview" style="background-color: rgb(0, 153, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#0099CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#0099FF" class="safety-color__list-item-preview" style="background-color: rgb(0, 153, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#0099FF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#00CC00" class="safety-color__list-item-preview" style="background-color: rgb(0, 204, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#00CC00</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#00CC33" class="safety-color__list-item-preview" style="background-color: rgb(0, 204, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#00CC33</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#00CC66" class="safety-color__list-item-preview" style="background-color: rgb(0, 204, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#00CC66</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#00CC99" class="safety-color__list-item-preview" style="background-color: rgb(0, 204, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#00CC99</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#00CCCC" class="safety-color__list-item-preview" style="background-color: rgb(0, 204, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#00CCCC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#00CCFF" class="safety-color__list-item-preview" style="background-color: rgb(0, 204, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#00CCFF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#00FF00" class="safety-color__list-item-preview" style="background-color: rgb(0, 255, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#00FF00</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#00FF33" class="safety-color__list-item-preview" style="background-color: rgb(0, 255, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#00FF33</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#00FF66" class="safety-color__list-item-preview" style="background-color: rgb(0, 255, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#00FF66</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#00FF99" class="safety-color__list-item-preview" style="background-color: rgb(0, 255, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#00FF99</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#00FFCC" class="safety-color__list-item-preview" style="background-color: rgb(0, 255, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#00FFCC</div>
                            </div>
                        </div>
                        <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
                    </div>
                    <a-divider>红蓝</a-divider>
                    <div data-v-2e45d0a3="" role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">
                        <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
                        <div data-v-2e45d0a3="" class="safety-color__list">
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#000000" class="safety-color__list-item-preview" style="background-color: rgb(0, 0, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#000000</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#000033" class="safety-color__list-item-preview" style="background-color: rgb(0, 0, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#000033</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#000066" class="safety-color__list-item-preview" style="background-color: rgb(0, 0, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#000066</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#000099" class="safety-color__list-item-preview" style="background-color: rgb(0, 0, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#000099</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#0000CC" class="safety-color__list-item-preview" style="background-color: rgb(0, 0, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#0000CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#0000FF" class="safety-color__list-item-preview" style="background-color: rgb(0, 0, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#0000FF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#330000" class="safety-color__list-item-preview" style="background-color: rgb(51, 0, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#330000</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#330033" class="safety-color__list-item-preview" style="background-color: rgb(51, 0, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#330033</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#330066" class="safety-color__list-item-preview" style="background-color: rgb(51, 0, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#330066</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#330099" class="safety-color__list-item-preview" style="background-color: rgb(51, 0, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#330099</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#3300CC" class="safety-color__list-item-preview" style="background-color: rgb(51, 0, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#3300CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#3300FF" class="safety-color__list-item-preview" style="background-color: rgb(51, 0, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#3300FF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#660000" class="safety-color__list-item-preview" style="background-color: rgb(102, 0, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#660000</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#660033" class="safety-color__list-item-preview" style="background-color: rgb(102, 0, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#660033</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#660066" class="safety-color__list-item-preview" style="background-color: rgb(102, 0, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#660066</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#660099" class="safety-color__list-item-preview" style="background-color: rgb(102, 0, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#660099</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#6600CC" class="safety-color__list-item-preview" style="background-color: rgb(102, 0, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#6600CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#6600FF" class="safety-color__list-item-preview" style="background-color: rgb(102, 0, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#6600FF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#990000" class="safety-color__list-item-preview" style="background-color: rgb(153, 0, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#990000</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#990033" class="safety-color__list-item-preview" style="background-color: rgb(153, 0, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#990033</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#990066" class="safety-color__list-item-preview" style="background-color: rgb(153, 0, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#990066</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#990099" class="safety-color__list-item-preview" style="background-color: rgb(153, 0, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#990099</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#9900CC" class="safety-color__list-item-preview" style="background-color: rgb(153, 0, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#9900CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#9900FF" class="safety-color__list-item-preview" style="background-color: rgb(153, 0, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#9900FF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC0000" class="safety-color__list-item-preview" style="background-color: rgb(204, 0, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC0000</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC0033" class="safety-color__list-item-preview" style="background-color: rgb(204, 0, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC0033</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC0066" class="safety-color__list-item-preview" style="background-color: rgb(204, 0, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC0066</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC0099" class="safety-color__list-item-preview" style="background-color: rgb(204, 0, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC0099</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC00CC" class="safety-color__list-item-preview" style="background-color: rgb(204, 0, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC00CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC00FF" class="safety-color__list-item-preview" style="background-color: rgb(204, 0, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC00FF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FF0000" class="safety-color__list-item-preview" style="background-color: rgb(255, 0, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FF0000</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FF0033" class="safety-color__list-item-preview" style="background-color: rgb(255, 0, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FF0033</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FF0066" class="safety-color__list-item-preview" style="background-color: rgb(255, 0, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FF0066</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FF0099" class="safety-color__list-item-preview" style="background-color: rgb(255, 0, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FF0099</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FF00CC" class="safety-color__list-item-preview" style="background-color: rgb(255, 0, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FF00CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FF00FF" class="safety-color__list-item-preview" style="background-color: rgb(255, 0, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FF00FF</div>
                            </div>
                        </div>
                        <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
                    </div>
                    <a-divider>红绿</a-divider>
                    <div data-v-2e45d0a3="" role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">
                        <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
                        <div data-v-2e45d0a3="" class="safety-color__list">
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#000000" class="safety-color__list-item-preview" style="background-color: rgb(0, 0, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#000000</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#003300" class="safety-color__list-item-preview" style="background-color: rgb(0, 51, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#003300</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#006600" class="safety-color__list-item-preview" style="background-color: rgb(0, 102, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#006600</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#009900" class="safety-color__list-item-preview" style="background-color: rgb(0, 153, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#009900</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#00CC00" class="safety-color__list-item-preview" style="background-color: rgb(0, 204, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#00CC00</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#00FF00" class="safety-color__list-item-preview" style="background-color: rgb(0, 255, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#00FF00</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#330000" class="safety-color__list-item-preview" style="background-color: rgb(51, 0, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#330000</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#333300" class="safety-color__list-item-preview" style="background-color: rgb(51, 51, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#333300</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#336600" class="safety-color__list-item-preview" style="background-color: rgb(51, 102, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#336600</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#339900" class="safety-color__list-item-preview" style="background-color: rgb(51, 153, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#339900</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#33CC00" class="safety-color__list-item-preview" style="background-color: rgb(51, 204, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#33CC00</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#33FF00" class="safety-color__list-item-preview" style="background-color: rgb(51, 255, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#33FF00</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#660000" class="safety-color__list-item-preview" style="background-color: rgb(102, 0, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#660000</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#663300" class="safety-color__list-item-preview" style="background-color: rgb(102, 51, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#663300</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#666600" class="safety-color__list-item-preview" style="background-color: rgb(102, 102, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#666600</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#669900" class="safety-color__list-item-preview" style="background-color: rgb(102, 153, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#669900</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#66CC00" class="safety-color__list-item-preview" style="background-color: rgb(102, 204, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#66CC00</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#66FF00" class="safety-color__list-item-preview" style="background-color: rgb(102, 255, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#66FF00</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#990000" class="safety-color__list-item-preview" style="background-color: rgb(153, 0, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#990000</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#993300" class="safety-color__list-item-preview" style="background-color: rgb(153, 51, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#993300</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#996600" class="safety-color__list-item-preview" style="background-color: rgb(153, 102, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#996600</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#999900" class="safety-color__list-item-preview" style="background-color: rgb(153, 153, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#999900</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#99CC00" class="safety-color__list-item-preview" style="background-color: rgb(153, 204, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#99CC00</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#99FF00" class="safety-color__list-item-preview" style="background-color: rgb(153, 255, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#99FF00</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC0000" class="safety-color__list-item-preview" style="background-color: rgb(204, 0, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC0000</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC3300" class="safety-color__list-item-preview" style="background-color: rgb(204, 51, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC3300</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC6600" class="safety-color__list-item-preview" style="background-color: rgb(204, 102, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC6600</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC9900" class="safety-color__list-item-preview" style="background-color: rgb(204, 153, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC9900</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CCCC00" class="safety-color__list-item-preview" style="background-color: rgb(204, 204, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CCCC00</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CCFF00" class="safety-color__list-item-preview" style="background-color: rgb(204, 255, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CCFF00</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FF0000" class="safety-color__list-item-preview" style="background-color: rgb(255, 0, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FF0000</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FF3300" class="safety-color__list-item-preview" style="background-color: rgb(255, 51, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FF3300</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FF6600" class="safety-color__list-item-preview" style="background-color: rgb(255, 102, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FF6600</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FF9900" class="safety-color__list-item-preview" style="background-color: rgb(255, 153, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FF9900</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FFCC00" class="safety-color__list-item-preview" style="background-color: rgb(255, 204, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FFCC00</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FFFF00" class="safety-color__list-item-preview" style="background-color: rgb(255, 255, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FFFF00</div>
                            </div>
                        </div>
                        <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
                    </div>
                    <a-divider>大地色系</a-divider>
                    <div data-v-2e45d0a3="" role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">
                        <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
                        <div data-v-2e45d0a3="" class="safety-color__list">
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#333333" class="safety-color__list-item-preview" style="background-color: rgb(51, 51, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#333333</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#333366" class="safety-color__list-item-preview" style="background-color: rgb(51, 51, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#333366</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#333399" class="safety-color__list-item-preview" style="background-color: rgb(51, 51, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#333399</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#3333CC" class="safety-color__list-item-preview" style="background-color: rgb(51, 51, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#3333CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#336633" class="safety-color__list-item-preview" style="background-color: rgb(51, 102, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#336633</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#336666" class="safety-color__list-item-preview" style="background-color: rgb(51, 102, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#336666</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#336699" class="safety-color__list-item-preview" style="background-color: rgb(51, 102, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#336699</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#3366CC" class="safety-color__list-item-preview" style="background-color: rgb(51, 102, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#3366CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#339933" class="safety-color__list-item-preview" style="background-color: rgb(51, 153, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#339933</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#339966" class="safety-color__list-item-preview" style="background-color: rgb(51, 153, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#339966</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#339999" class="safety-color__list-item-preview" style="background-color: rgb(51, 153, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#339999</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#3399CC" class="safety-color__list-item-preview" style="background-color: rgb(51, 153, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#3399CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#33CC33" class="safety-color__list-item-preview" style="background-color: rgb(51, 204, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#33CC33</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#33CC66" class="safety-color__list-item-preview" style="background-color: rgb(51, 204, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#33CC66</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#33CC99" class="safety-color__list-item-preview" style="background-color: rgb(51, 204, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#33CC99</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#33CCCC" class="safety-color__list-item-preview" style="background-color: rgb(51, 204, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#33CCCC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#663333" class="safety-color__list-item-preview" style="background-color: rgb(102, 51, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#663333</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#663366" class="safety-color__list-item-preview" style="background-color: rgb(102, 51, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#663366</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#663399" class="safety-color__list-item-preview" style="background-color: rgb(102, 51, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#663399</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#6633CC" class="safety-color__list-item-preview" style="background-color: rgb(102, 51, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#6633CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#666633" class="safety-color__list-item-preview" style="background-color: rgb(102, 102, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#666633</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#666666" class="safety-color__list-item-preview" style="background-color: rgb(102, 102, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#666666</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#666699" class="safety-color__list-item-preview" style="background-color: rgb(102, 102, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#666699</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#6666CC" class="safety-color__list-item-preview" style="background-color: rgb(102, 102, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#6666CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#669933" class="safety-color__list-item-preview" style="background-color: rgb(102, 153, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#669933</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#669966" class="safety-color__list-item-preview" style="background-color: rgb(102, 153, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#669966</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#669999" class="safety-color__list-item-preview" style="background-color: rgb(102, 153, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#669999</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#6699CC" class="safety-color__list-item-preview" style="background-color: rgb(102, 153, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#6699CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#66CC33" class="safety-color__list-item-preview" style="background-color: rgb(102, 204, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#66CC33</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#66CC66" class="safety-color__list-item-preview" style="background-color: rgb(102, 204, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#66CC66</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#66CC99" class="safety-color__list-item-preview" style="background-color: rgb(102, 204, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#66CC99</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#66CCCC" class="safety-color__list-item-preview" style="background-color: rgb(102, 204, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#66CCCC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#993333" class="safety-color__list-item-preview" style="background-color: rgb(153, 51, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#993333</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#993366" class="safety-color__list-item-preview" style="background-color: rgb(153, 51, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#993366</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#993399" class="safety-color__list-item-preview" style="background-color: rgb(153, 51, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#993399</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#9933CC" class="safety-color__list-item-preview" style="background-color: rgb(153, 51, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#9933CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#996633" class="safety-color__list-item-preview" style="background-color: rgb(153, 102, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#996633</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#996666" class="safety-color__list-item-preview" style="background-color: rgb(153, 102, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#996666</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#996699" class="safety-color__list-item-preview" style="background-color: rgb(153, 102, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#996699</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#9966CC" class="safety-color__list-item-preview" style="background-color: rgb(153, 102, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#9966CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#999933" class="safety-color__list-item-preview" style="background-color: rgb(153, 153, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#999933</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#999966" class="safety-color__list-item-preview" style="background-color: rgb(153, 153, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#999966</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#999999" class="safety-color__list-item-preview" style="background-color: rgb(153, 153, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#999999</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#9999CC" class="safety-color__list-item-preview" style="background-color: rgb(153, 153, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#9999CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#99CC33" class="safety-color__list-item-preview" style="background-color: rgb(153, 204, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#99CC33</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#99CC66" class="safety-color__list-item-preview" style="background-color: rgb(153, 204, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#99CC66</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#99CC99" class="safety-color__list-item-preview" style="background-color: rgb(153, 204, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#99CC99</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#99CCCC" class="safety-color__list-item-preview" style="background-color: rgb(153, 204, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#99CCCC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC3333" class="safety-color__list-item-preview" style="background-color: rgb(204, 51, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC3333</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC3366" class="safety-color__list-item-preview" style="background-color: rgb(204, 51, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC3366</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC3399" class="safety-color__list-item-preview" style="background-color: rgb(204, 51, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC3399</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC33CC" class="safety-color__list-item-preview" style="background-color: rgb(204, 51, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC33CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC6633" class="safety-color__list-item-preview" style="background-color: rgb(204, 102, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC6633</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC6666" class="safety-color__list-item-preview" style="background-color: rgb(204, 102, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC6666</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC6699" class="safety-color__list-item-preview" style="background-color: rgb(204, 102, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC6699</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC66CC" class="safety-color__list-item-preview" style="background-color: rgb(204, 102, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC66CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC9933" class="safety-color__list-item-preview" style="background-color: rgb(204, 153, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC9933</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC9966" class="safety-color__list-item-preview" style="background-color: rgb(204, 153, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC9966</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC9999" class="safety-color__list-item-preview" style="background-color: rgb(204, 153, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC9999</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC99CC" class="safety-color__list-item-preview" style="background-color: rgb(204, 153, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC99CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CCCC33" class="safety-color__list-item-preview" style="background-color: rgb(204, 204, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CCCC33</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CCCC66" class="safety-color__list-item-preview" style="background-color: rgb(204, 204, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CCCC66</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CCCC99" class="safety-color__list-item-preview" style="background-color: rgb(204, 204, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CCCC99</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CCCCCC" class="safety-color__list-item-preview" style="background-color: rgb(204, 204, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CCCCCC</div>
                            </div>
                        </div>
                        <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
                    </div>
                    <a-divider>柔和色系</a-divider>
                    <div data-v-2e45d0a3="" role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">
                        <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
                        <div data-v-2e45d0a3="" class="safety-color__list">
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#666666" class="safety-color__list-item-preview" style="background-color: rgb(102, 102, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#666666</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#666699" class="safety-color__list-item-preview" style="background-color: rgb(102, 102, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#666699</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#6666CC" class="safety-color__list-item-preview" style="background-color: rgb(102, 102, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#6666CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#6666FF" class="safety-color__list-item-preview" style="background-color: rgb(102, 102, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#6666FF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#669966" class="safety-color__list-item-preview" style="background-color: rgb(102, 153, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#669966</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#669999" class="safety-color__list-item-preview" style="background-color: rgb(102, 153, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#669999</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#6699CC" class="safety-color__list-item-preview" style="background-color: rgb(102, 153, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#6699CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#6699FF" class="safety-color__list-item-preview" style="background-color: rgb(102, 153, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#6699FF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#66CC66" class="safety-color__list-item-preview" style="background-color: rgb(102, 204, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#66CC66</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#66CC99" class="safety-color__list-item-preview" style="background-color: rgb(102, 204, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#66CC99</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#66CCCC" class="safety-color__list-item-preview" style="background-color: rgb(102, 204, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#66CCCC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#66CCFF" class="safety-color__list-item-preview" style="background-color: rgb(102, 204, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#66CCFF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#66FF66" class="safety-color__list-item-preview" style="background-color: rgb(102, 255, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#66FF66</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#66FF99" class="safety-color__list-item-preview" style="background-color: rgb(102, 255, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#66FF99</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#66FFCC" class="safety-color__list-item-preview" style="background-color: rgb(102, 255, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#66FFCC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#66FFFF" class="safety-color__list-item-preview" style="background-color: rgb(102, 255, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#66FFFF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#996666" class="safety-color__list-item-preview" style="background-color: rgb(153, 102, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#996666</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#996699" class="safety-color__list-item-preview" style="background-color: rgb(153, 102, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#996699</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#9966CC" class="safety-color__list-item-preview" style="background-color: rgb(153, 102, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#9966CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#9966FF" class="safety-color__list-item-preview" style="background-color: rgb(153, 102, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#9966FF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#999966" class="safety-color__list-item-preview" style="background-color: rgb(153, 153, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#999966</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#999999" class="safety-color__list-item-preview" style="background-color: rgb(153, 153, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#999999</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#9999CC" class="safety-color__list-item-preview" style="background-color: rgb(153, 153, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#9999CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#9999FF" class="safety-color__list-item-preview" style="background-color: rgb(153, 153, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#9999FF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#99CC66" class="safety-color__list-item-preview" style="background-color: rgb(153, 204, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#99CC66</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#99CC99" class="safety-color__list-item-preview" style="background-color: rgb(153, 204, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#99CC99</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#99CCCC" class="safety-color__list-item-preview" style="background-color: rgb(153, 204, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#99CCCC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#99CCFF" class="safety-color__list-item-preview" style="background-color: rgb(153, 204, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#99CCFF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#99FF66" class="safety-color__list-item-preview" style="background-color: rgb(153, 255, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#99FF66</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#99FF99" class="safety-color__list-item-preview" style="background-color: rgb(153, 255, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#99FF99</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#99FFCC" class="safety-color__list-item-preview" style="background-color: rgb(153, 255, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#99FFCC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#99FFFF" class="safety-color__list-item-preview" style="background-color: rgb(153, 255, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#99FFFF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC6666" class="safety-color__list-item-preview" style="background-color: rgb(204, 102, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC6666</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC6699" class="safety-color__list-item-preview" style="background-color: rgb(204, 102, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC6699</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC66CC" class="safety-color__list-item-preview" style="background-color: rgb(204, 102, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC66CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC66FF" class="safety-color__list-item-preview" style="background-color: rgb(204, 102, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC66FF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC9966" class="safety-color__list-item-preview" style="background-color: rgb(204, 153, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC9966</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC9999" class="safety-color__list-item-preview" style="background-color: rgb(204, 153, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC9999</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC99CC" class="safety-color__list-item-preview" style="background-color: rgb(204, 153, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC99CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CC99FF" class="safety-color__list-item-preview" style="background-color: rgb(204, 153, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CC99FF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CCCC66" class="safety-color__list-item-preview" style="background-color: rgb(204, 204, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CCCC66</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CCCC99" class="safety-color__list-item-preview" style="background-color: rgb(204, 204, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CCCC99</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CCCCCC" class="safety-color__list-item-preview" style="background-color: rgb(204, 204, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CCCCCC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CCCCFF" class="safety-color__list-item-preview" style="background-color: rgb(204, 204, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CCCCFF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CCFF66" class="safety-color__list-item-preview" style="background-color: rgb(204, 255, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CCFF66</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CCFF99" class="safety-color__list-item-preview" style="background-color: rgb(204, 255, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CCFF99</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CCFFCC" class="safety-color__list-item-preview" style="background-color: rgb(204, 255, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CCFFCC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CCFFFF" class="safety-color__list-item-preview" style="background-color: rgb(204, 255, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CCFFFF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FF6666" class="safety-color__list-item-preview" style="background-color: rgb(255, 102, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FF6666</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FF6699" class="safety-color__list-item-preview" style="background-color: rgb(255, 102, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FF6699</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FF66CC" class="safety-color__list-item-preview" style="background-color: rgb(255, 102, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FF66CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FF66FF" class="safety-color__list-item-preview" style="background-color: rgb(255, 102, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FF66FF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FF9966" class="safety-color__list-item-preview" style="background-color: rgb(255, 153, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FF9966</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FF9999" class="safety-color__list-item-preview" style="background-color: rgb(255, 153, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FF9999</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FF99CC" class="safety-color__list-item-preview" style="background-color: rgb(255, 153, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FF99CC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FF99FF" class="safety-color__list-item-preview" style="background-color: rgb(255, 153, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FF99FF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FFCC66" class="safety-color__list-item-preview" style="background-color: rgb(255, 204, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FFCC66</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FFCC99" class="safety-color__list-item-preview" style="background-color: rgb(255, 204, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FFCC99</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FFCCCC" class="safety-color__list-item-preview" style="background-color: rgb(255, 204, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FFCCCC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FFCCFF" class="safety-color__list-item-preview" style="background-color: rgb(255, 204, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FFCCFF</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FFFF66" class="safety-color__list-item-preview" style="background-color: rgb(255, 255, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FFFF66</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FFFF99" class="safety-color__list-item-preview" style="background-color: rgb(255, 255, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FFFF99</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FFFFCC" class="safety-color__list-item-preview" style="background-color: rgb(255, 255, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FFFFCC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FFFFFF" class="safety-color__list-item-preview" style="background-color: rgb(255, 255, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FFFFFF</div>
                            </div>
                        </div>
                        <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
                    </div>
                    <a-divider>灰色</a-divider>
                    <div data-v-2e45d0a3="" role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">
                        <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
                        <div data-v-2e45d0a3="" class="safety-color__list">
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#000000" class="safety-color__list-item-preview" style="background-color: rgb(0, 0, 0);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#000000</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#111111" class="safety-color__list-item-preview" style="background-color: rgb(17, 17, 17);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#111111</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#222222" class="safety-color__list-item-preview" style="background-color: rgb(34, 34, 34);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#222222</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#333333" class="safety-color__list-item-preview" style="background-color: rgb(51, 51, 51);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#333333</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#444444" class="safety-color__list-item-preview" style="background-color: rgb(68, 68, 68);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#444444</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#555555" class="safety-color__list-item-preview" style="background-color: rgb(85, 85, 85);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#555555</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#666666" class="safety-color__list-item-preview" style="background-color: rgb(102, 102, 102);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#666666</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#777777" class="safety-color__list-item-preview" style="background-color: rgb(119, 119, 119);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#777777</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#888888" class="safety-color__list-item-preview" style="background-color: rgb(136, 136, 136);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#888888</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#999999" class="safety-color__list-item-preview" style="background-color: rgb(153, 153, 153);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#999999</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#AAAAAA" class="safety-color__list-item-preview" style="background-color: rgb(170, 170, 170);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#AAAAAA</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#BBBBBB" class="safety-color__list-item-preview" style="background-color: rgb(187, 187, 187);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#BBBBBB</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#CCCCCC" class="safety-color__list-item-preview" style="background-color: rgb(204, 204, 204);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#CCCCCC</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#DDDDDD" class="safety-color__list-item-preview" style="background-color: rgb(221, 221, 221);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#DDDDDD</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#EEEEEE" class="safety-color__list-item-preview" style="background-color: rgb(238, 238, 238);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#EEEEEE</div>
                            </div>
                            <div data-v-2e45d0a3="" class="safety-color__list-item">
                                <div data-v-2e45d0a3="" data-clipboard-text="#FFFFFF" class="safety-color__list-item-preview" style="background-color: rgb(255, 255, 255);"></div>
                                <div data-v-2e45d0a3="" class="safety-color__list-item-value">#FFFFFF</div>
                            </div>
                        </div>
                        <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
                    </div>
                </div>
            </div>
            <div class="w-full h-full p-4" v-show="state.activeKey === '3'">
                <div class="flex  gap-4">
                    <a-input placeholder="HEX" v-model:value="state.primaryColor" />
                    <a-input placeholder="RGB" v-model:value="state.primaryColor2" />
                    <a-input placeholder="HSL" v-model:value="state.primaryColor3" />
                    <a-input placeholder="HSV" v-model:value="state.primaryColor4" />
                </div>
                <div class="w-full h-full flex justify-center items-center">
                    <div class="colorChoose">
                        <input class="ml-1 cursor-pointer" type="color" :value="state.primaryColor" @input="e => onColorChange(e)" />
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>
<script setup>
let state = reactive({
    activeKey: "1",
    primaryColor: "",
    primaryColor2: "",
    primaryColor3: "",
    primaryColor4: "",
});

const onColorChange = XEUtils.throttle(fun, 300);
function fun(e) {
    let rgbArr = [];
    rgbArr = set16ToRgb(e.target.value);
    state.primaryColor = e.target.value;
    state.primaryColor2 = "rgba(" + rgbArr.join(",") + ",1)";
    state.primaryColor3 = rgbtohsl(rgbArr[0], rgbArr[1], rgbArr[2]);
    state.primaryColor4 = rgbtohsv(rgbArr[0], rgbArr[1], rgbArr[2]);
}

function rgbtohsv(r, g, b) {
    r = r / 255;
    g = g / 255;
    b = b / 255;
    var h, s, v;
    var min = Math.min(r, g, b);
    var max = (v = Math.max(r, g, b));
    var l = (min + max) / 2;
    var difference = max - min;

    if (max == min) {
        h = 0;
    } else {
        switch (max) {
            case r:
                h = (g - b) / difference + (g < b ? 6 : 0);
                break;
            case g:
                h = 2.0 + (b - r) / difference;
                break;
            case b:
                h = 4.0 + (r - g) / difference;
                break;
        }
        h = Math.round(h * 60);
    }
    if (max == 0) {
        s = 0;
    } else {
        s = 1 - min / max;
    }
    s = Math.round(s * 100);
    v = Math.round(v * 100);
    return [h, s, v];
}

function rgbtohsl(r, g, b) {
    r = r / 255;
    g = g / 255;
    b = b / 255;

    var min = Math.min(r, g, b);
    var max = Math.max(r, g, b);
    var l = (min + max) / 2;
    var difference = max - min;
    var h, s, l;
    if (max == min) {
        h = 0;
        s = 0;
    } else {
        s = l > 0.5 ? difference / (2.0 - max - min) : difference / (max + min);
        switch (max) {
            case r:
                h = (g - b) / difference + (g < b ? 6 : 0);
                break;
            case g:
                h = 2.0 + (b - r) / difference;
                break;
            case b:
                h = 4.0 + (r - g) / difference;
                break;
        }
        h = Math.round(h * 60);
    }
    s = Math.round(s * 100); //转换成百分比的形式
    l = Math.round(l * 100);
    return [h, s, l];
}

function set16ToRgb(str) {
    var reg = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;
    if (!reg.test(str)) {
        return;
    }
    let newStr = str.toLowerCase().replace(/\#/g, "");
    let len = newStr.length;
    if (len == 3) {
        let t = "";
        for (var i = 0; i < len; i++) {
            t += newStr.slice(i, i + 1).concat(newStr.slice(i, i + 1));
        }
        newStr = t;
    }
    let arr = []; //将字符串分隔，两个两个的分隔
    for (var i = 0; i < 6; i = i + 2) {
        let s = newStr.slice(i, i + 2);
        arr.push(parseInt("0x" + s));
    }
    return arr;
}

defineExpose({});
const { xGrid, taskPanelRef, batchConfigRef } = toRefs(state);
</script>
<style scoped>
.ant-tabs .ant-tabs-bottom-content > .ant-tabs-tabpane,
.ant-tabs .ant-tabs-top-content > .ant-tabs-tabpane {
    flex-shrink: 0;
    width: 100%;
    -webkit-backface-visibility: hidden;
    opacity: 1;
    transition: opacity 0.45s;
}

.safety-color__list-item[data-v-2e45d0a3] {
    float: left;
    padding: 10px;
}
.safety-color__list-item-preview[data-v-2e45d0a3] {
    width: 150px;
    height: 80px;
    border-radius: 5px;
    cursor: pointer;
}
.safety-color__list-item-value[data-v-2e45d0a3] {
    text-align: center;
    padding-top: 5px;
}
.colorChoose {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    overflow: hidden;
}
.colorChoose input {
    width: 240px;
    height: 240px;
    margin: -10px 0 0 -10px;
}
</style>